/*
 * Copyright 2015-2016 Imply Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../imports';

.side-drawer {
  $drawer-v-padding: 10px;

  @include pin-left($side-drawer-width);
  background: $white;
  font-size: 13px;
  box-shadow: 1px 0 2px 0 hsla(0, 0, 0, 0.13), 2px 0 12px 0 hsla(0, 0, 0, 0.26);
  overflow: auto;

  .home-container {
    padding-top: $drawer-v-padding;
    padding-bottom: $drawer-v-padding;
    border-top: 1px solid #ddd;
  }

  .home-link {
    line-height: 34px;
    padding: 0 $nav-padding;
    cursor: pointer;

    .svg-icon {
      opacity: 0.6;
      height: 19px;
      width: 19px;
      display: inline-block;
      top: 7px;
      left: 0;
      margin-right: 9px;

      path {
        fill: $brand;
      }
    }

    &:hover,
    &.selected {
      background: rgba($brand, 0.12);

      .svg-icon {
        opacity: 1;
      }
    }

    &.selected {
      svg path {
        fill: $brand;
      }
    }
  }

  .nav-list {
    padding-top: $drawer-v-padding;
    padding-bottom: $drawer-v-padding;

    .items {
      .item {
        .icon {
          opacity: 0.6;

          svg path {
            fill: $brand;
          }
        }

        &:hover,
        &.selected {
          .icon {
            opacity: 1;
          }
        }
      }
    }
  }

  .nav-logo {
    cursor: pointer;
  }
}

.side-drawer-enter {
  transform: translate(-$side-drawer-width - 1, 0);

  &.side-drawer-enter-active {
    transform: translate(0, 0);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1) .1s;
  }
}

.side-drawer-leave {
  transform: translate(0, 0);

  &.side-drawer-leave-active {
    transform: translate(-$side-drawer-width - 1, 0);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1) .1s;
  }
}
